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Cómo  organizar  la  estructura  de  un  sitio  web 

Todo  diseño  web  depende  tanto  de  su  formato  estético  como  de  la  calidad  de  los 
contenidos  que  ofrece.  Un  sitio  cautivante  desde  la  imagen  pero  obsoleto  en  su 
propuesta  conceptual,  rápidamente  será  abandonado  por  los  usuarios.  Por  ello,  in¬ 
sistimos  en  que  la  estructura  de  un  sitio  web  debe  ser  cuidadosamente  planificada. 


i 


Así  como  un  libro  posee  un  índice  que  orienta  a  sus  lectores  sobre 
los  contenidos  que  incluye,  un  sitio  web  también  debe  garantizar 
a  sus  visitantes  la  usabilidad. 


» 


Una  forma  práctica  y  sencilla  de  organizar  la  estructura  de  un  sitio  web  es  median¬ 
te  esquemas  que  dispongan  los  contenidos  en  función  de  su  relevancia  concep¬ 
tual.  Veamos  algunos  ejemplos: 


El  formato  en  árbol,  enlaza  la  página  principal 
con  otras  secundarias,  y  a  su  vez  conecta  a  estas 
con  otras  menos  importantes.  Las  páginas  web 
quedan  vinculadas  en  orden  de  prioridad. 

La  ventaja  es  la  organización  jerárquica  de 
la  información,  la  desventaja  es  que  se  debe 
retroceder  para  acceder  a  otros  temas  del  sitio. 


El  formato  en  red  vincula  a  todas  las  páginas  del 
sitio  web  entre  sí. 

Como  ventaja,  permite  una  navegación  menos 
estructurada  -con  muchos  y  variados  enlaces-. 

Como  desventaja,  puede  resultar  compleja  para 
quien  no  está  seguro  de  la  información  que  busca, 
dónde  o  cómo  hacerlo. 
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La  página  de  inicio 

La  primera  visita  del  usuario  a  un  sitio  web  es  la  oportunidad  para  generar  una 
excelente  impresión.  Una  buena  página  de  inicio  garantiza  que  el  usuario  perma¬ 
nezca  interesado  en  la  navegación  y  profundice  su  exploración  del  sitio. 

Para  el  diseño  de  las  páginas  de  inicio  es  recomendable: 

■  Explicitar  el  público  al  que  apunta  el  sitio. 

■  Mostrar  los  contenidos  generales  más  importantes  que  incluye. 

■  Incorporar  un  banner* 1  donde  el  usuario  pueda  ver  las  últimas  novedades  y 
actualizaciones  del  sitio. 

■  Introducir  un  enlace  en  la  cabecera  de  la  página  para  que  el  usuario  pueda 
retornar  a  la  página  de  inicio  rápidamente. 

■  Diseñar  un  menú  de  navegación  que  oriente  al  visitante  en  su  recorrido  por 
el  sitio  web. 


1  Ver  definición  de  banner  en  el  Glosario. 

i — ; - ¡ - - — r 

I  Fascículo  2  Cuaderno  4:  Claves  sobre  diseño  web  para  nuestro  sitio  |  http://competenciastic.educ.ar  2 


COLECCIÓN  FASCÍCULOS  DIGITALES 

Competencias  en  TIC 


El  menú  de  navegación 

Toda  página  web  debe  poseer  un  menú  de  navegación  que  ofrezca  una  guía  para 
su  recorrido.  Este  menú  debe  ser  claro,  de  modo  que  el  usuario  sepa  qué  buscar 
y  dónde  hacerlo. 

Veamos  un  ejemplo: 


En  este  caso  vemos  que  existen  cuatro  grandes  categorías  que  organizan  los  con¬ 
tenidos:  Recursos  educativos,  Noticias  y  agenda.  Capacitación,  y  Debates. 

Cuando  el  usuario  elige  alguna  de  esas  opciones  haciendo  clic  en  el  botón  corres¬ 
pondiente,  tiene  acceso  a  la  información  de  esa  sección. 

Un  usuario  interesado  en  la  temática  o  que  sabe  lo  que  necesita  rápidamente  pue¬ 
de  identificar  el  sector  del  sitio  web  que  le  brindará  la  información  requerida. 
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Para  avanzados... 

Aplicando  CSS2  o  JavaScript3  se  pueden  crear  menús  más  sensi¬ 
bles  e  interactivos,  de  orientación  horizontal  o  vertical. 


» 


Recomendaciones  para  redactar  y  organizar  contenidos 

A  la  hora  de  elaborar  los  componentes  de  la  web,  es  recomendable  seguir  las  pis¬ 
tas  que  sugieren  los  programadores,  diseñadores  y  desarrolladores  de  contenidos: 

■  Redactar  páginas  fáciles  de  leer  y  visitar 

Las  competencias  cognitivas  que  utilizan  los  usuarios  de  internet  son  diferentes 
de  las  de  un  lector  de  textos  en  formato  papel.  Habitualmente,  el  navegante  es- 
canea  con  sus  ojos  la  página  que  visita  y  lo  hace  de  modo  superficial,  realizando 
una  lectura  transversal  del  texto  y  buscando  palabras  clave.  Es  conveniente  incluir 
oraciones  breves,  titulares  concisos  y  palabras  resaltadas  que  puedan  facilitar  este 
procedimiento  de  búsqueda  al  usuario. 

■  Organizar  la  escritura  en  formato  de  pirámide  invertida 


2  Ver  definición  de  CSS  en  el  Glosario. 

3  Ver  definición  de  JavaScript  el  en  Glosario. 
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Esta  estrategia  consiste  en  presentar  primero  las  conclusiones  generales  del  tema 
trabajado,  para  luego  avanzar  en  el  desarrollo  más  específico  del  contenido.  Esto 
permite  al  usuario  anticipar  la  estructura  del  material  y  decidir  rápidamente  si  es 
de  su  interés  o  no. 

■  Destacar  la  simpleza 

Aquí  van  una  serie  de  recursos  muy  útiles  para  avanzar  en  la  escritura  de  un  sitio 
web:  utilizar  oraciones  cortas,  evitar  el  exceso  de  adjetivos,  controlar  el  uso  de 
metáforas  engorrosas  de  explicar,  aplicar  un  equilibro  de  contraste  entre  fondo  y 
letra  que  facilite  la  lectura. 

■  Paginar  los  documentos  extensos 

Si  un  material  es  demasiado  largo,  puede  distribuirse  en  distintas  páginas  y 
permitir  al  usuario  desplazarse  a  través  de  ellas.  Este  recurso  es  el  que  aplican 
los  sitios  de  buscadores  (como  Yahoo  o  Google),  dada  la  gran  cantidad  de  in¬ 
formación  que  albergan  sobre  un  mismo  tema.  Se  los  visualiza  de  esta  forma: 

Página  1  <  Atrás  |  1  2  3  4  |  Adelante  > 

■  Utilizar  imágenes 

Las  imágenes  pueden  resultar  muy  útiles  para  ilustrar  ideas,  conceptos  y  aspectos 
del  tema  que  se  trate. 

■  Incluir  gráficos  y  mapas 

Los  gráficos  permiten  visualizar  procesos,  concentrando  mucha  información  en  un 
esquema  pequeño.  Los  mapas,  facilitan  la  referencia  de  los  contenidos  en  función 
del  sentido  territorial  de  éstos. 


Nuestro  sitio  en  los  buscadores  de  la  Web 

Los  buscadores  son  uno  de  los  recursos  más  utilizados  de  internet.  Existen  busca¬ 
dores  de  empleo,  de  inmuebles,  de  personas,  de  imágenes,  etc.  Quienes  más  sa¬ 
ben  sobre  este  tema  recomiendan  que  en  los  encabezados,  títulos  y  descripciones 
de  cada  página  de  un  sitio  web  se  utilicen  frases  sencillas  y  descriptivas;  ni  me¬ 
tafóricas,  ni  de  fantasía.  Esto  permite  que  los  motores  de  búsqueda  rápidamente 
referencien  al  usuario  nuestra  página  web. 

Los  viejos  buscadores  consistían  en  directorios  de  páginas  web,  a  los  que 
cada  dueño  o  creador  de  un  sitio  debía  suscribirse,  señalando  las  palabras  clave 
por  las  que  debía  ser  encontrado.  En  la  actualidad,  los  buscadores  son  índi¬ 
ces  automáticos  de  páginas  web  que  se  construyen  de  una  forma  particular.  A 
partir  de  la  visita  de  arañas  ó  robots,  se  elabora  un  listado  con  la  información 
completa  de  cada  página  de  un  sitio.  Ese  listado  se  traduce  en  un  índice  de  las 
palabras  que  aplica  el  sitio,  que  se  ordenan  jerárquicamente  por  orden  de  rele¬ 
vancia  y  generalidad. 

El  sistema  también  es  capaz  de  relevar  si  una  página  es  buena  o  no,  de  acuerdo  con 
las  recomendaciones  que  sus  propios  usuarios  realizan.  En  función  de  ello  la  pon- 
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dera  dentro  del  listado  del  buscador.  Finalmente,  el  buscador  muestra  al  usuario  los 
resultados  de  su  búsqueda  siguiendo  un  algoritmo  de  ordenación  que  considera  dos 
componentes:  la  importancia  de  la  página  web  y  la  relevancia  del  término 
que  se  introdujo  como  criterio  de  búsqueda. 
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¿Qué  son  las  arañas  o  robots? 

La  palabra  web  viene  del  inglés  y  se  traduce  como  tela  de  araña, 
por  ello,  ¡qué  mejor  que  una  araña  para  deambular  por  la  Web! 
Precisamente,  los  programas  diseñados  para  recorrer  la  Web  ras¬ 
treando  los  enlaces  entre  páginas  se  denominan  en  inglés  spider, 
que  significa  araña. 


» 


Glosario 

Banner:  es  una  estrategia  de  comunicación  y  publicidad  que  se  utiliza  en  las  pá¬ 
ginas  web.  Consiste  en  una  pieza  diseñada  para  llamar  la  atención  del  usuario  e 
invitarlo  a  hacer  clic  sobre  ella.  Generalmente  se  trata  de  imágenes  (JPG  o  GIF)  o 
animaciones  programadas  con  diversos  recursos  (Java,  Flash,  Adobe  Shockwave), 
que  comunican  mensajes  sencillos  y  contundentes. 

CSS:  esta  sigla  responde  al  inglés  Cascading  Style  Sheets,  que  significa  hojas  de 
estilo  en  cascada.  El  CSS  es  un  lenguaje  que  se  utiliza  para  separar  la  estructura 
de  un  documento,  de  su  presentación. 

JavaScript:  es  un  lenguaje  de  programación  del  lado  del  cliente,  dado  que  no  se 
ejecuta  en  el  servidor,  sino  que  es  el  propio  navegador  del  usuario  el  que  lo  procesa. 
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